<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="clock.css">
</head>

<body>
    <div class="clock">
        <div class="panel">
            <div class="dial-container">
                <div class="dial"></div>
                <div class="dial"></div>
                <div class="dial"></div>
                <div class="dial"></div>
                <div class="dial"></div>
                <div class="dial"></div>
            </div>
            <div class="pan"></div>
            <div class="hand hour"></div>
            <div class="hand minute"></div>
            <div class="hand secend"></div>
            <div class=" circle"></div>
        </div>
    </div>
    <input type="text" id="time">
    <button id="btn">设置时间</button>
    <button id="start">开始</button>
    <button id="pause">暂停</button>
    <script>
        var sHand = document.querySelector('.secend');
        var mHand = document.querySelector('.minute');
        var hHand = document.querySelector('.hour');
        //时钟的运行状态，false代表停止，true代表运行
        var runFlag = false;
        var timer;


        function setTime(date) {
            //如果date没有传入，默认时间就是现在
            date = date || new Date()
            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();
            //59 354
            //0 - 0

            //设置秒针的旋转角度
            sHand.style.transform = `translateX(-50%) rotate(${s*6+m*360}deg)`
            mHand.style.transform = `translateX(-50%) rotate(${m*6+s/10}deg)`
                //0:59 360*0 + 59*6 = 356
                //1:0 360*1 + 0*60 =  360

            // 12:59:59 59*6 + 59*360 
            // 1:00:00 0
            hHand.style.transform = `translateX(-50%) rotate(${h*30+m/2}deg)`


        }
        //设置过渡时间
        function setTransiton(t) {
            sHand.style.transitionDuration = `${t}s`
        }

        function start() {
            setTransiton(0.01)

            function setDefault() {
                setTransiton(0.5)
            }
            sHand.addEventListener('transitionend', setDefault)
                //如果时钟在运行则结束程序后面不执行
            if (runFlag) {
                return
            }

            //设置定时器
            timer = setInterval(setTime, 1000);
            //设置运行状态为true
            runFlag = true
        }
        //开始运行
        start()
            //暂停时钟运行函数
        function pause() {
            clearInterval(timer)
            runFlag = false
        }
        startBtn = document.getElementById('start');
        pauseBtn = document.getElementById('pause');
        //开始按钮绑定点击事件的回调函数
        startBtn.onclick = start
            //暂停按钮绑定点击事件的回调函数
        pauseBtn.addEventListener('click', pause)
            //设置时间
        var btn = document.getElementById('btn');
        var timeInput = document.getElementById('time');
        btn.onclick = function() {
            //通过字符串拼接完成一个符合格式的
            var timeStr = "2000 " + timeInput.value;
            date = new Date(timeStr)
            setTime(date)

        }
    </script>
</body>

</html>